<template>
  <a-select v-bind="props" :value="props.value" @change="handleChange($event)" :options="state.options"></a-select>
</template>

<script setup>
import { SelectProps } from 'ant-design-vue/es/select';

const props = defineProps({
  ...SelectProps(),
  fetchOptionsPromisify: {
    type: Function,
  },
});

const state = reactive({
  options: [],
});

onBeforeMount(async () => {
  if (!props.fetchOptionsPromisify) {
    console.warn('AsyncSelector require props.fetchOptionsPromisify');
    return;
  }
  state.options = await props.fetchOptionsPromisify();
});

const emits = defineEmits(['update:value']);
const handleChange = (e) => {
  emits('update:value', e);
};
</script>
